<template>
    <div class="select_class">
        <header >
            <a @click="$api.goBack()" class="back"></a>
            <span>发布食谱</span>
            <a class="add" @click="subbmit()" >发布</a>
        </header>
        <!-- <div class="main">
            <div class="flex">
                <div>标题</div>
                <div class="red">*</div>
            </div>
            <div><input v-model="detail.title" @change="changeValue" placeholder="请输入标题名称" /></div>
        </div> -->
        <div class="main " style="padding-bottom:0;border-bottom:0;">
            <div class="flex">
                <div>内容</div>
                <div class="red">*</div>
            </div>
        </div>
        <div class="main " >
            <div class="textarea_wrap" style="width:100%;padding:0;">
                <textarea @change="changeValue" placeholder="说点什么吧"
                 v-model="detail.content" rows="4"></textarea>
            </div>
        </div>
        <div class="main" style="justify-content:start">
            <div class="image_wrap" v-for="img in detail.filePathList">
                <div @click="deleteImg(index)" class="deleteImg"></div>
                <img @click.stop="$api.showImgDetail(img.filePath)" :src="img.filePath" />
            </div>
            <div class="image_wrap" @click="AddPhoto()">
                <img  src="../../static/images/other/add-img.png"/>
            </div>
        </div>
        <!-- <div class="row" style="padding:0.5rem;margin-top:0.6rem;">
            <mt-button style="width:100%;" type="danger" @click="subbmit()">提交</mt-button>
        </div> -->
        <getImage v-model='sheetVisible' ></getImage>
    </div>
</template>
<script>
    import {
        MessageBox
    } from 'mint-ui';
    import getImage from '../components/getImage.vue'
    export default {
        data() {
            return {
                useInfo: '',
                detail: {
                    filePathList: [],
                    title: '',
                    content: '',
                },
                actions: [{
                    name: '拍照',
                    method: this.paizhao
                }, {
                    name: '从相册中选择',
                    method: this.selectImg
                }],
                sheetVisible: false,
            }
        },
        components: {
            getImage
        },
        created() {
            this.getUserInfo();
            this.getDetail();
            this.getImageBack();
        },
        methods: {
            getUserInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
            },
            deleteImg(index) {
                this.detail.filePathList.splice(index, 1)
                this.changeValue();
            },
            getDetail() {
                let detail = JSON.parse(sessionStorage.getItem('recipeDetail'));
                console.log('dsaf', JSON.parse(sessionStorage.getItem('recipeDetail')));
                if (detail) {
                    this.detail = detail;
                }
            },
            getImageBack() {
                var filepath = JSON.parse(sessionStorage.getItem('imgOption'));
                if (filepath) {
                    this.detail.filePathList.push(filepath);
                }
                sessionStorage.removeItem('imgOption');
                this.changeValue();
            },
            AddPhoto() {
                if (this.detail.filePathList.length > 8) {
                    MessageBox('提示', '图片不要超过9张');
                    return;
                }
                this.sheetVisible = true;
            },
            feedback() { //意见反馈
                this.$router.push({
                    'path': 'm7_1_1'
                })
            },
            changeValue() {
                sessionStorage.setItem('recipeDetail', JSON.stringify(this.detail));
            },
            selectfeedtype() {
                this.feedtype = true;
            },
            selectType(type) {
                this.typename = type.name;
                this.typeid = type.id;
            },
            subbmit() { //提交
                var params = JSON.parse(JSON.stringify(this.detail));
                // if (!(this.$check.empty(params.title, '标题不能为空!'))) {
                //     return false;
                // }
                if (!(this.$check.empty(params.content, '内容不能为空!'))) {
                    return false;
                }
                if (params.content.length > 254) {
                    MessageBox('提示', '食谱内容长度不能超过255');
                    return false;
                }
                params.filePathList1 = JSON.stringify(params.filePathList);
                delete params.filePathList;
                params.schoolId = this.useInfo.schoolId;
                params.userId = this.useInfo.userId;
                var url = "/recipe/add"
                this.$api.post(url, params, (data) => {
                    MessageBox('提示', '提交成功');
                    this.$api.clearItem();
                    this.$api.goBack();
                })
            }
        }
    }
</script>